import 'package:flutter/material.dart';
import 'verification_page.dart';

class GuidePage extends StatelessWidget {
  const GuidePage({super.key});

  /// 构建指南步骤
  Widget _buildGuideStep({
    required String title,
    required String description,
    required String image,
    required int step,
    bool isLast = false,
  }) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // 步骤数字
        Container(
          width: 24,
          height: 24,
          decoration: BoxDecoration(
            color: const Color(0xFFFF5722),
            borderRadius: BorderRadius.circular(12),
          ),
          child: Center(
            child: Text(
              step.toString(),
              style: const TextStyle(
                color: Colors.white,
                fontSize: 14,
                fontWeight: FontWeight.w500,
              ),
            ),
          ),
        ),
        const SizedBox(width: 12),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                title,
                style: const TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.w500,
                ),
              ),
              const SizedBox(height: 8),
              Text(
                description,
                style: TextStyle(
                  fontSize: 14,
                  color: Colors.grey[600],
                  height: 1.5,
                ),
              ),
              const SizedBox(height: 12),
              Container(
                height: 160,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(8),
                  image: DecorationImage(
                    image: NetworkImage(image),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              if (!isLast) const SizedBox(height: 24),
            ],
          ),
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.white,
        title: const Text(
          '认证指南',
          style: TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.w500,
          ),
        ),
        centerTitle: true,
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            _buildGuideStep(
              step: 1,
              title: '准备证件',
              description: '请准备好您的身份证原件（正反面）、驾驶证、行驶证等证件，确保证件在有效期内且信息清晰可见。',
              image: 'https://picsum.photos/400/200?random=1',
            ),
            _buildGuideStep(
              step: 2,
              title: '填写信息',
              description: '按要求填写个人基本信息，包括姓名、身份证号、手机号等，确保信息准确无误。',
              image: 'https://picsum.photos/400/200?random=2',
            ),
            _buildGuideStep(
              step: 3,
              title: '上传照片',
              description: '使用手机拍摄证件照片，确保照片清晰、完整，无反光、遮挡。照片需要包含证件的所有边角。',
              image: 'https://picsum.photos/400/200?random=3',
            ),
            _buildGuideStep(
              step: 4,
              title: '等待审核',
              description: '提交资料后，我们将在1-2个工作日内完成审核。审核结果将通过短信和App消息通知您。',
              image: 'https://picsum.photos/400/200?random=4',
              isLast: true,
            ),
            const SizedBox(height: 32),
            SizedBox(
              width: double.infinity,
              child: ElevatedButton(
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => const VerificationPage(),
                    ),
                  );
                },
                style: ElevatedButton.styleFrom(
                  backgroundColor: const Color(0xFFFF5722),
                  foregroundColor: Colors.white,
                  padding: const EdgeInsets.symmetric(vertical: 12),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(8),
                  ),
                  elevation: 0,
                ),
                child: const Text(
                  '立即认证',
                  style: TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.w500,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
} 